/**
 * 火花分镜生成成功对话框
 * 显示生成结果并提供操作选项
 */

import React from 'react'
import { Modal, Button, Space, Typography, Divider } from 'antd'
import { CheckCircleOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons'

const { Text, Title } = Typography

export interface SuccessDialogProps {
  visible: boolean
  projectId: string
  sceneCount: number
  totalDuration: number
  onEdit: () => void
  onClose: () => void
}

export const SuccessDialog: React.FC<SuccessDialogProps> = ({
  visible,
  sceneCount,
  totalDuration,
  onEdit,
  onClose
}) => {
  const formatDuration = (seconds: number): string => {
    const minutes = Math.floor(seconds / 60)
    const secs = seconds % 60
    if (minutes === 0) {
      return `${secs}秒`
    }
    return `${minutes}分${secs}秒`
  }

  return (
    <Modal
      title={null}
      open={visible}
      footer={null}
      closable={false}
      width={500}
      centered
    >
      <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center' }}>
        {/* 成功图标 */}
        <div>
          <CheckCircleOutlined
            style={{
              fontSize: 64,
              color: '#52c41a'
            }}
          />
        </div>

        {/* 标题 */}
        <div>
          <Title level={3} style={{ margin: 0 }}>
            分镜生成成功
          </Title>
        </div>

        <Divider style={{ margin: '12px 0' }} />

        {/* 生成结果摘要 */}
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <div>
            <Text type="secondary">场景数量：</Text>
            <Text strong style={{ fontSize: 16, marginLeft: 8 }}>
              {sceneCount} 个场景
            </Text>
          </div>
          <div>
            <Text type="secondary">视频时长：</Text>
            <Text strong style={{ fontSize: 16, marginLeft: 8 }}>
              {formatDuration(totalDuration)}
            </Text>
          </div>
        </Space>

        <Divider style={{ margin: '12px 0' }} />

        {/* 操作按钮 */}
        <Space size="middle" style={{ width: '100%', justifyContent: 'center' }}>
          <Button
            type="primary"
            size="large"
            icon={<EditOutlined />}
            onClick={onEdit}
          >
            立即编辑
          </Button>
          <Button
            size="large"
            icon={<CloseOutlined />}
            onClick={onClose}
          >
            稍后处理
          </Button>
        </Space>

        {/* 提示文字 */}
        <div>
          <Text type="secondary" style={{ fontSize: 12 }}>
            您可以在分镜列表中找到刚刚创建的项目
          </Text>
        </div>
      </Space>
    </Modal>
  )
}
